<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilibili </title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/headr.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/fenqu.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    <script src='jquery.min.js'></script>
</head>

<body>
    <div class="headr">
        <div class="nav">
            <div class="left-nav">
                <ul class="link">
                    <li>
                        <div class="logo">图标</div>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">BW</a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">主站</a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">会员中心</a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;"><i class="fa fa-share" aria-hidden="true"></i> 分享</a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle-thin fa-stack-2x"></i>
                                    <i class="fa fa-mobile fa-stack-1x"></i>
                                  </span> 下载APP</a>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="search">
                <div>
                    <input placeholder="请输入搜索内容">
                </div>
                <div class="nav-btn">
                    <button>搜索</button>
                </div>
            </div>
            <div class="right-nav">
                <ul class="user">
                    <li class="userbox">
                        <a href="javascript:;" class="userbox-head">
                            <div class="tx">头像</div>
                        </a>
                    </li>
                    <li class="userbox" id="shoucang">
                        <div class="collection">
                            <div class='collection-left'>
                                <div class="collection-left-content collection-left-color">
                                    <span>默认收藏夹</span>
                                    <span>199</span>
                                </div>
                                <div class="collection-left-content">
                                    <span>稍后再看</span>
                                    <span>19</span>
                                </div>
                            </div>
                            <div class="collection-content" style="display: block;">
                                <div class="collection-content-shipin">
                                    <div class="collection-picture">1</div>
                                    <div class="collection-info">
                                        <div class="collection-info-title">Title title</div>
                                        <div class="collection-info-up">王炳森</div>
                                    </div>
                                </div>
                                <div class="collection-content-shipin">
                                    <div class="collection-picture">2</div>
                                    <div class="collection-info">
                                        <div class="collection-info-title">Title title</div>
                                        <div class="collection-info-up">王炳森</div>
                                    </div>
                                </div>
                                <div class="collection-content-shipin">
                                    <div class="collection-picture">3</div>
                                    <div class="collection-info">
                                        <div class="collection-info-title">Title title</div>
                                        <div class="collection-info-up">王炳森</div>
                                    </div>
                                </div>
                            </div>
                            <div class="collection-content">
                                <div class="collection-content-shipin">
                                    <div class="collection-picture">4</div>
                                    <div class="collection-info">
                                        <div class="collection-info-title">Title title</div>
                                        <div class="collection-info-up">王炳森</div>
                                    </div>
                                </div>
                                <div class="collection-content-shipin">
                                    <div class="collection-picture">5</div>
                                    <div class="collection-info">
                                        <div class="collection-info-title">Title title</div>
                                        <div class="collection-info-up">王炳森</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:;" class="userbox-head" >收藏</a>
                    </li>
                    <li class="userbox">
                        <a href="javascript:;" class="userbox-head">历史</a>
                    </li>
                    <li class="userbox">
                        <a href="javascript:;" class="userbox-head">投稿</a>
                    </li>
                    <li class="userbox">
                        <a href="javascript:;" class="userbox-head">登录</a>
                    </li>
                </ul>
            </div>         
        </div>
    </div>
    <div class="body">
            <div class="body-nav">
                <div class="body-nav-left">
                    <div class="body-nav-left-box">
                        <a href="javaScript:;">
                            <div class="shouye">
                                <i class="fa fa-home" aria-hidden="true"></i>
                            </div>
                            <span>首页</span>
                        </a>
                    </div>
                    <div class="body-nav-left-box">
                        <a href="javaScript:;">
                            <div class="xihuan">
                                <i class="fa fa-heart" aria-hidden="true"></i>
                            </div>
                            <span>喜欢</span>
                        </a>
                    </div>
                    <div class="body-nav-left-box">
                        <a href="javaScript:;">
                            <div class="pindao">
                                <i class="fa fa-tags" aria-hidden="true"></i>
                            </div>
                            <span>频道</span>
                        </a>
                    </div>
                    <div class="body-nav-left-box">
                        <a href="javaScript:;">
                            <div class="tuijian">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                            </div>
                            <span>推荐</span>
                        </a>
                    </div>
                    <div class="body-nav-left-box">
                        <a href="javaScript:;">
                            <div class="dongtai">
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>
                            </div>
                            <span>动态</span>
                        </a>
                    </div>
                </div>
                <div class="body-nav-mid">
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">动画</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">番剧</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">小说</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">直播</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">舞蹈</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">记录</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">鬼畜</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">科技</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">生活</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">娱乐</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">资讯</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">影视</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">专栏</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">Vlog</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">游戏</a>
                        <div class="num">999+</div>
                    </div>
                    <div class="body-nav-mid-box">
                        <a href="javaScript:;">学习</a>
                        <div class="num">999+</div>
                    </div>
                </div>
                <div class="body-nav-right">
                    <div class="riqi">
                        <span>今天是</span><div class="data"></div>
                    </div>
                    <div class="jieri">
                        <span>距离中秋节还有</span><div class='time'>00</div><span>天</span>
                        <div class="body-nav-right-box"><span id='body-nav-right-box'>关闭鼠标</span><div class="body-nav-right-btn"></div></div>
                    </div>
                </div>
            </div>
            <div class="body-first">
                <div class="content">
                    <div class="lbox">
                        <div class="lbtn"></div>
                    </div>
                    <div class="rbox">
                        <div class="rbtn"></div>
                    </div>
                    <ul>
                        <li>
                            <a href="javaScript:;">
                                <div>1</div>
                            </a>
                        </li>
                        <li>
                            <a href="javaScript:;">
                                <div>2</div>
                            </a>
                        </li>
                        <li>
                            <a href="javaScript:;">
                                <div>3</div>
                            </a>
                        </li>
                    </ul>
                    <div class="point">
                        <ul>
            
                        </ul>
                    </div>
                    <div class="more"><a href="javaScript:;">更多</a><div class="more-right"></div></div>
                </div>
                <div class="content-right">
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                    <div class="content-right-box">
                        <div class="info">
                            <h3>Title</h3>
                            <p>介绍介绍介绍介绍介绍</p>
                            <p>UP:王炳森</p>
                            <p>9.9万播放</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body-title">
                <i class="fa fa-book" style="font-size:38px;color:#35aaf8"></i><p>漫画</p>
                <div class="title-more"><a href="javaScript:;"><div id="title-more"><span>更多<i class="fa fa-angle-double-right"></i></span></div></a></div>
            </div>
            <div class="body-second">
                    <div class="body-second-box">
                        <div class="body-second-imgbox">
                            <img src="img/1.jpg">
                        </div>
                        <div class="body-second-content">
                            <h2>Title</h2>
                            <p>这是介绍这是介绍这是介绍</p>
                            <a href="javaScript:;">Read More</a>
                        </div>
                    </div>
                    <div class="body-second-box">
                        <div class="body-second-imgbox">
                            <img src="img/2.jpg">
                        </div>
                        <div class="body-second-content">
                            <h2>Title</h2>
                            <p>这是介绍这是介绍这是介绍</p>
                            <a href="javaScript:;">Read More</a>
                        </div>
                    </div>
                    <div class="body-second-box">
                        <div class="body-second-imgbox">
                            <img src="img/3.jpg">
                        </div>
                        <div class="body-second-content">
                            <h2>Title</h2>
                            <p>这是介绍这是介绍这是介绍</p>
                            <a href="javaScript:;">Read More</a>
                        </div>
                    </div>
                    <div class="body-second-box">
                        <div class="body-second-imgbox">
                            <img src="img/4.jpg">
                        </div>
                        <div class="body-second-content">
                            <h2>Title</h2>
                            <p>这是介绍这是介绍这是介绍</p>
                            <a href="javaScript:;">Read More</a>
                        </div>
                    </div>
                    <div class="body-second-box">
                        <div class="body-second-imgbox">
                            <img src="img/5.jpg">
                        </div>
                        <div class="body-second-content">
                            <h2>Title</h2>
                            <p>这是介绍这是介绍这是介绍</p>
                            <a href="javaScript:;">Read More</a>
                        </div>
                    </div>
            </div>
            <div class="body-ad">
               <a href="ad.html" target="_blank">
                     <span>用</span>
                     <span>爱</span>
                     <span>发</span>
                     <span>电</span>
               </a>    
            </div>
            <div class="fenqu">
                <div class="fenqu-tuijian">
                    <div class="fenqu-title">
                        <div class="fenqu-name">
                            <span><i class="fa fa-gamepad" aria-hidden="true"><span>游戏</span></i></span>
                        </div>
                        <div class="fenqu-change">
                            <button class="change-button1"><div><i class="fa fa-refresh" aria-hidden="true"></i></div>换一换</button>
                            <button class="change-button2">更多<div></div></button>
                        </div>
                    </div>
                    <div class="fenqu-content">
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                    </div>
                </div>
                <div class="fenqu-paihang">
                    <div class="paihang-title">
                        <span>排行榜</span>
                        <button class="change-button2">更多<div></div></button>
                    </div>
                    <div class="paihang">
                        <div class="top1">
                            <span class="number-paihang">1</span>
                            <div class="preview">
                                <div class="pic">
                                    <a href="javascript:;"></a>
                                    <div class="later"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                                    <div class="beforeLater">稍后观看</div>
                                </div>
                                <div class="txt">
                                    <a href="javascript:;"><p>[Title]分区部分内容 title...title...</p></a>
                                    <span>综合评分：12.0万</span>
                                </div>
                            </div>
                        </div>
                        <div class="top2">
                            <span class="number-paihang">2</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang">3</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">4</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">5</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">6</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">7</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">8</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">9</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">10</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fenqu">
                <div class="fenqu-tuijian">
                    <div class="fenqu-title">
                        <div class="fenqu-name">
                            <span><i class="fa fa-film" aria-hidden="true"></i><span>电影</span></i></span>
                        </div>
                        <div class="fenqu-change">
                            <button class="change-button1"><div><i class="fa fa-refresh" aria-hidden="true"></i></div>换一换</button>
                            <button class="change-button2">更多<div></div></button>
                        </div>
                    </div>
                    <div class="fenqu-content">
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                        <div class="fenqu-viedo">
                            <div class="viedo-picture"><span>Viedo</span>
                                <div class="fenqu-viedo-info">
                                    <div>
                                        <span><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> 23.3万</span>
                                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 1.8万</span>
                                    </div>
                                    <span>23:33</span>
                                </div>
                            </div>
                            <a href="javascript:;" class="viedo-title">[Title]分区部分内容 title...title...</br>content...</a>
                            <a href="javascript:;" class="viedo-up">UP: Xxx</a>
                        </div>
                    </div>
                </div>
                <div class="fenqu-paihang">
                    <div class="paihang-title">
                        <span>排行榜</span>
                        <button class="change-button2">更多<div></div></button>
                    </div>
                    <div class="paihang">
                        <div class="top1">
                            <span class="number-paihang">1</span>
                            <div class="preview">
                                <div class="pic">
                                    <a href="javascript:;"></a>
                                    <div class="later"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                                    <div class="beforeLater">稍后观看</div>
                                </div>
                                <div class="txt">
                                    <a href="javascript:;"><p>[Title]分区部分内容 title...title...</p></a>
                                    <span>综合评分：12.0万</span>
                                </div>
                            </div>
                        </div>
                        <div class="top2">
                            <span class="number-paihang">2</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang">3</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">4</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">5</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">6</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">7</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">8</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">9</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                        <div class="top2">
                            <span class="number-paihang2">10</span>
                            <a href="javascript:;"><p>[Title]分区部分内容 title...title...content...</p></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class='login'>
                <div class='title'>
                    资料卡
                </div>
                <div class='contener'>
                    <div class="login-exit">返回</div>
                </div>
            </div>
            <div class="gotop">
                <div class="aerial">
                        <div class="aerial-left"></div>
                        <div class="aerial-right"></div>
                </div>
                <div class="scroll">
                    <div class="scroll-content">推荐</div>
                    <div class="scroll-content">漫画</div>
                    <div class="scroll-content">游戏</div>
                    <div class="scroll-content">电影</div>
                    <div class="gotopbtn"><i class="fa fa-angle-up" aria-hidden="true"></i></div>
                </div>
            </div>
    </div>
    <div class="footer">
        <div class="footer-wrapper">
            <div class="footer-left">
                <div class="footer-left-header">
                    <p>相关信息</p>
                </div>
                <div class="footer-left-body">
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">联系我们</a>
                    <a href="javascript:;">加入我们</a>
                    <a href="javascript:;">用户协议</a>
                    <a href="javascript:;">隐私政策</a>
                    <a href="javascript:;">官方认证</a>
                </div>
            </div>
            <div class="footer-right">
                <div class="footer-icon">
                    <a href="javascript:;"><i class="fa fa-facebook-square"></i></a>
                    <h4>facebook</h4>
                </div>
                <div class="footer-icon">
                    <a href="javascript:;"><i class="fa fa-qq"></i>
                    </a>
                    <h4>官方QQ</h4>
                </div>
                <div class="footer-icon">
                    <a href="javascript:;"><i class="fa fa-weixin"></i></a>
                    <h4>官方微信</h4>
                </div>
                <div class="footer-icon">
                    <a href="javascript:;"><i class="fa fa-weibo"></i></a>
                    <h4>官方微博</h4>
                </div>
                <div class="footer-icon">
                    <a href="javascript:;"><i class="fa fa-arrow-down"></i></a>
                    <h4>客户端下载</h4>
                </div>
            </div>
        </div>   
    </div>
</body>

</html>